<template>
  <div class="home">
    <!-- 声明式路由 -->
    <!-- <router-link to="/about">进入about页面</router-link> -->
    <!-- <router-link :to="{
      path: '/about',
      query: {
        id: 124,
        pageIndex: 1,
        pageSize: 10
      }
    }">进入about页面</router-link> -->
    <!-- <router-link :to="{
      name: 'About',
      params: {
        id: 124,
        pageIndex: 1,
        pageSize: 10
      }
    }">进入about页面</router-link> -->
    <!-- 
      parmas只能和name合用跳转路由传参 
      params传参参数不会显示在url地址上 安全性会高一点 美观 优雅
      但是params携带的参数如果页面刷新参数会消失
      query可以和name以及path都可以合作传参
      并且query携带的参数会显示在url地址上 并且刷新不会消失 但是query携带参数会导致浏览器地址较长不美观
     -->
    <!-- <router-link :to="{
      name: 'About',
      query: {
        id: 124,
        pageIndex: 1,
        pageSize: 10
      }
    }">进入about页面</router-link> -->
    <!-- 
      编程式路由和声明式路由携参的规则和用法都一样 只不过编程式路由使用事件进行页面跳转
      通过js进行页面跳转
     -->
     <button @click="goAbout">进入about页面</button>
  </div>
</template>

<script>

export default {
  name: 'Home',
  methods: {
    goAbout() {
      this.$router.push({
        name: 'About',
        query: {
          id: 124,
          pageIndex: 1,
          pageSize: 10
        }
    })
    }
  }
}
</script>
